$(document).ready(function () {
    var picture = $("#picture");
    var pictures = picture.children();
    // var width = picture.width();
    // var arr = $("#arr");
    var pointlist = $("#pointList");
    var points = pointlist.children();
    var left = $("#left");
    var right = $("#right");
    var index = 0;
    var timers = null;




    //自动轮播,设置定时器

    timers = setInterval(function autoplay() {
        points.eq(index).siblings();
        // fadeIn() 淡入      fadeOut()淡出
        pictures.eq(index).fadeIn(100).siblings().fadeOut(100);
        index++;
        if (index == points.length) {
            index = 0;
        }
    }, 1000)

    //鼠标放到原点换图

    //bind() 绑定; 第一个参数为事件,第二个参数为函数,行为
    points.bind("mouseover", function () {
        index = $(this).index();
        // fadeIn() 淡入      fadeOut()淡出
        pictures.eq(index).fadeIn(1).siblings().fadeOut(1);
        // $(this).attr({ "style": 'background-color:#db192a' })
        //     .siblings().attr({ 'style': 'background-color:#fff' });
    })




    // 鼠标悬停到轮播图上停止轮播, 离开后开始轮播
    $('#main').hover(function () {
        clearInterval(timers);
        right.attr({ "style": "opacity:1" });
        left.attr({ "style": "opacity: 1" });

    }, function () {
        timers = setInterval(function autoplay() {
            points.eq(index).siblings();
            // fadeIn() 淡入      fadeOut()淡出
            pictures.eq(index).fadeIn(1).siblings().fadeOut(1);
            index++;
            if (index == points.length) {
                index = 0;
            }
        }, 1000)
        right.attr({ "style": "opacity: 0" });
        left.attr({ "style": "opacity: 0" });
    })

    // //下一张按钮,悬停事件
    // //
    // right.hover(function () {
    //     $(this).attr({ "style": "opacity: 0.5" }).siblings().attr({ "style": "opacity: 0.3" });
    // }, function () {
    //     $(this).attr({ "style": "opacity: 0" }).siblings().attr({ "style": "opacity: 0" });
    // });
    // //点击换到下一张
    // right.bind("click", function () {
    //     index++;
    //     if (index == points.length) {
    //         index = 0;
    //     }
    //     points.eq(index).attr({ "style": "background-color:#db192a" }).siblings().attr({ "style": "background-color:#fff" });
    //     pictures.eq(index).fadeIn(20).siblings().fadeOut(10);
    // });




    // //上一张按钮,悬停事件
    // left.hover(function () {
    //     $(this).attr({ "style": "opacity: 0.5" }).siblings().attr({ "style": "opacity: 0.5" });
    // }, function () {
    //     $(this).attr({ "style": "opacity: 0" }).siblings().attr({ "style": "opacity: 0" });
    // });
    // //换到上一张
    // left.bind("click", function () {
    //     if (index == 0) {
    //         index = points.length;
    //     }
    //     index--;
    //     points.eq(index).attr({ "style": "background-color:#db192a" }).siblings().attr({ "style": "background-color:#fff" });
    //     pictures.eq(index).fadeIn(10).siblings().fadeOut(10);
    // });



})
